<!DOCTYPE html>
<html>
	<head>
		<mate charset="utf-8">
		<title>小车循环</title>
		<style type="text/css">
		*{padding: 0px;margin: 0px}
		.box2{width: 300px;
			  height: 200px;
			  background: red;
			  border-radius: 50px 170px 10px 10px;
			  animation:box2_run 5s linear infinite;
			  position: relative;}
		@keyframes box2_run{
			0%{margin-left: 0px;
			   );
		    }
		    50%{margin-left: 1000px;
			   }
			100%{margin-left:0px;}
		}
		
	    .left_box,.right_box{width: 100px;
	                        height: 100px;
	                    	background:#ccc;
	                        position:absolute;
	                        margin-top: 200px;
	                        text-align: center;
	                        line-height: 88px;
	                        border-radius: 50px;
	                        font-size: 50px;
	                        animation: running 5s linear infinite;
	                        }
	     @keyframes running{0%{margin-left: 0px;}
	 						50%{margin-left: 1000px;}
	 					    100%{margin-left: 0px;}
	 					    }
		.right_box{margin-left: 200px;
		           animation:right_run 5s linear infinite;}
		@keyframes right_run{
			0%{transform:rotate(0deg);}
			50%{transform:rotate(3600deg);}
			100%{transform: rotate(0deg);}
		}
        .left_box{animation: left_run 5s linear infinite;}
        @keyframes left_run{
        	0%{ transform: rotate(0deg);}
        	50%{transform:rotate(3600deg);}
        	100%{transform: rotate(0deg);}
        }
		
			
			         
			    

		</style>
        
	</head>
	<body>
		<div class="box1">
			<div class="box2">
				<div class="left_box">+</div>
				<div class="right_box">+</div>
			</div>
		</div>

	</body>
</html>